import 'package:environmental_les_app/common/style/colours.dart';
import 'package:environmental_les_app/common/utils/utils.dart';
import 'package:flutter_clx_base/flutter_clx_base.dart';
import 'package:photo_view/photo_view.dart';

class BigPhotoView extends StatefulWidget {
  final List<String>? imageList;
  final int? selectIndex;

  const BigPhotoView({super.key, this.imageList, this.selectIndex});

  @override
  State<BigPhotoView> createState() => _BigPhotoViewState();
}

class _BigPhotoViewState extends State<BigPhotoView>
    with TickerProviderStateMixin {
  late TabController _tabController;
  int _imageIndex = 0;
  List<String> _imageList = [];

  @override
  void initState() {
    _imageList = widget.imageList ?? [];
    _imageIndex = widget.selectIndex ?? 0;
    _tabController = TabController(length: _imageList.length, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
      title: "图片详情",
      children: [
        SizedBox(
          height: Get.height * 0.7,
          child:
              TabBarView(controller: _tabController, children: _buildTabView()),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("${_imageIndex + 1}/${_imageList.length}"),
          ],
        ),
        _tabWidget(),
      ],
    );
  }

  List<Widget> _buildTabView() {
    return _imageList.map((String? image) {
      return PhotoView(
        imageProvider: ImageUtils.getNetworkImage(appendUrl(image)),
        backgroundDecoration: const BoxDecoration(color: Colors.white),
      );
    }).toList();
  }

  _tabWidget() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: _imageList.asMap().keys.map((index) {
          return InkWell(
            onTap: () {
              _imageIndex = index;
              _tabController.index = index;
              setState(() {});
            },
            child: Container(
              padding:
                  const EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
              margin:
                  const EdgeInsets.symmetric(horizontal: 5.0, vertical: 15.0),
              decoration: BoxDecoration(
                border: Border.all(
                    width: 1.0,
                    color:
                        _imageIndex == index ? Colours.appMain : Colors.grey),
              ),
              constraints: const BoxConstraints(maxWidth: 50.0),
              child: SizedBox(
                height: 50.0,
                child: ImageWidget.loadNetImage(_imageList[index]),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}
